<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <!-- 标题 -->
    <title>点菜宝</title>
    <!-- 关键词 -->
    <meta name="keywords" content="" />
    <!-- 网站简介 -->
    <meta name="description" content="" />
    <!-- 自适应屏幕 -->
    <meta name="viewport" content="width=device-width,height=device-height,inital-scale=1.0,maximum-scale=1.0,user-scalable=no;">
    <!-- IE兼容 -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!-- 最新 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" href="css/bootstrap.css">
    <!-- 核心 CSS 文件 -->
    <link rel="stylesheet" href="css/style.css" type="text/css">
</head>
<body>
    
    <!-- 顶部 -->
    <div class="header">
        <div class="container clearfix">
            <div class="header-left"><a href="">返回</a></div>
            <div class="header-center">选桌</div>
            <div class="header-right">
                <a href=""><img src="images/more.png" alt=""></a>
            </div>
        </div>
    </div>
    
    <div class="zhuozi">       
        <div class="clearfix">
            <ul role="tablist" class="zhuozi-left clearfix">
                <li role="presentation" class="active"><a href="#dating" aria-controls="dating" role="tab" data-toggle="tab">大厅</a></li>
                <li role="presentation"><a href="#baoxiang" aria-controls="baoxiang" role="tab" data-toggle="tab">包厢</a></li>
                <li role="presentation"><a href="#hubian" aria-controls="hubian" role="tab" data-toggle="tab">湖边</a></li>
            </ul>

            <!-- Tab panes -->
            <div class="tab-content">
                <!-- 大厅 -->
                <div role="tabpanel" class="tab-pane active" id="dating">
                    <ul class="zhuozi-right clearfix">
                        <!-- 待定中 -->
                        <li class="ddz">
                           桌号1
                           <p >状态：待定中</p>
                        </li>
                        <!-- 就餐中 -->
                        <li class="jcz">
                           桌号1
                           <p >状态：就餐中</p>
                        </li>
                        <!-- 已定出 -->
                        <li class="ydc">
                           桌号1
                           <p >状态：已定出</p>
                        </li>
                    </ul>
                </div>
               
                <!-- 包厢 -->
                <div role="tabpanel" class="tab-pane " id="baoxiang">
                    <ul class="zhuozi-right clearfix">
                        <!-- 待定中 -->
                        <li class="ddz">
                           桌号1
                           <p >状态：待定中</p>
                        </li>
                        <!-- 就餐中 -->
                        <li class="jcz">
                           桌号1
                           <p >状态：就餐中</p>
                        </li>
                        <!-- 已定出 -->
                        <li class="ydc">
                           桌号1
                           <p >状态：已定出</p>
                        </li>
                    </ul>
                </div>
               
                <!-- 湖边 -->
                <div role="tabpanel" class="tab-pane" id="hubian">
                    <ul class="zhuozi-right clearfix">
                        <!-- 待定中 -->
                        <li class="ddz">
                           桌号1
                           <p >状态：待定中</p>
                        </li>
                        <!-- 就餐中 -->
                        <li class="jcz">
                           桌号1
                           <p >状态：就餐中</p>
                        </li>
                        <!-- 已定出 -->
                        <li class="ydc">
                           桌号1
                           <p >状态：已定出</p>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>

    <div class="select-people">
        <div class="container">
            <ul class="cp-num dn clearfix" id="cpnum">
                <li>1人</li>
                <li>2人</li>
                <li>3人</li>
                <li>4人</li>
                <li>5人</li>
                <li>6人</li>
                <li>7人</li>
                <li>8人</li>
                <li>9人</li>
                <li>10人</li>
                <li>11人</li>
                <li>12人</li>
                <li>13人</li>
                <li>14人</li>
                <li>15人</li>
                <li>16人</li>
                <li>17人</li>
                <li>18人</li>
            </ul>
            <div class="cp-title clearfix">
                <div class="left">
                    人数：<b id="cpr"><i id="peoplenum">3人</i></b><span id="edit">修改</span>
                </div>
                <div class="right">
                    <form action="">
                        <input type="submit" value="提交">
                    </form>
                </div>
            </div>

        </div> 
    </div>   

    <!-- jQuery文件 -->
    <script src="js/jquery.min.js"></script>
    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script src="js/bootstrap.min.js"></script>
    <script>
       $(".zhuozi-right li").click(function(){
           $(this).parent().children(".active").removeClass("active");
           $(this).addClass("active");
       })
    </script>
    
    <script>
        $(document).ready(function(){                   
            $("#cpnum li").click(function () {
                $("#cpr i").addClass("dn");
                $(this).addClass("showz").siblings().removeClass("showz");
                {
                    var copyThisC = $(this).clone();
                    if ($("#selectC").length > 0) {
                        $("#selectC").html($(this).text());
                    } else {
                        $("#cpr").append(copyThisC.attr("id", "selectC"));
                    }
                }
                $("#cpnum").addClass("dn")
            });
            $("#edit").click(function () {
                $("#cpnum").removeClass("dn");
            });
        });
   </script>

</body>
</html>